"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Plus, Edit, Trash2, ArrowUpDown, ChevronLeft, ChevronRight } from "lucide-react"

interface Project {
  id: string
  name: string
  creator: string
  createTime: string
  description: string
  templateCount: number
  dataCount: number
  lastReportTime: string
}

interface ProjectManagementProps {
  onNavigateToTemplates: () => void
  onNavigateToData: () => void
}

export default function ProjectManagement({ onNavigateToTemplates, onNavigateToData }: ProjectManagementProps) {
  // 按最后生成报告时间倒序排列
  const [projects] = useState<Project[]>([
    {
      id: "1",
      name: "财务报告项目",
      creator: "张三",
      createTime: "2024-01-15",
      description: "用于生成月度和季度财务报告",
      templateCount: 3,
      dataCount: 15,
      lastReportTime: "2024-01-22", // 最近的日期
    },
    {
      id: "2",
      name: "市场分析项目",
      creator: "李四",
      createTime: "2024-01-10",
      description: "市场趋势分析和竞品分析报告",
      templateCount: 2,
      dataCount: 8,
      lastReportTime: "2024-01-20", // 第二近的日期
    },
    {
      id: "3",
      name: "人事管理项目",
      creator: "王五",
      createTime: "2024-01-05",
      description: "员工绩效和薪资报告生成",
      templateCount: 4,
      dataCount: 25,
      lastReportTime: "2024-01-18", // 第三近的日期
    },
  ])

  const [editingProject, setEditingProject] = useState<Project | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isNewProjectDialogOpen, setIsNewProjectDialogOpen] = useState(false)
  const [newProject, setNewProject] = useState({ name: "", description: "" })

  // 分页状态
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage] = useState(10)
  const totalPages = Math.ceil(projects.length / itemsPerPage)

  const handleEdit = (project: Project) => {
    setEditingProject(project)
    setIsDialogOpen(true)
  }

  const handleSave = () => {
    // 保存逻辑
    setIsDialogOpen(false)
    setEditingProject(null)
  }

  const handleNewProject = () => {
    setIsNewProjectDialogOpen(true)
  }

  const handleCreateProject = () => {
    // 创建项目逻辑
    setIsNewProjectDialogOpen(false)
    setNewProject({ name: "", description: "" })
  }

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">项目管理</h1>
        <Button onClick={handleNewProject}>
          <Plus className="h-4 w-4 mr-2" />
          新建项目
        </Button>
      </div>

      <div className="border rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="cursor-pointer">
                项目名称 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                创建人 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                创建时间 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>项目描述</TableHead>
              <TableHead className="cursor-pointer">
                关联模板数 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                关联数据数量 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead className="cursor-pointer">
                最后生成报告时间 <ArrowUpDown className="h-4 w-4 inline ml-1" />
              </TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {projects.map((project) => (
              <TableRow key={project.id}>
                <TableCell className="font-medium">{project.name}</TableCell>
                <TableCell>{project.creator}</TableCell>
                <TableCell>{project.createTime}</TableCell>
                <TableCell className="max-w-xs truncate">{project.description}</TableCell>
                <TableCell>
                  <Button variant="link" className="p-0 h-auto text-blue-600" onClick={onNavigateToTemplates}>
                    {project.templateCount}
                  </Button>
                </TableCell>
                <TableCell>
                  <Button variant="link" className="p-0 h-auto text-blue-600" onClick={onNavigateToData}>
                    {project.dataCount}
                  </Button>
                </TableCell>
                <TableCell>{project.lastReportTime}</TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => handleEdit(project)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button variant="outline" size="sm">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>

        {/* 分页器 */}
        <div className="flex items-center justify-center py-4 border-t">
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span className="text-sm">
              第 {currentPage} 页，共 {totalPages} 页
            </span>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
              disabled={currentPage === totalPages}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>

      {/* 编辑项目对话框 */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>编辑项目</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="name">项目名称</Label>
              <Input id="name" defaultValue={editingProject?.name} />
            </div>
            <div>
              <Label htmlFor="description">项目描述</Label>
              <Textarea id="description" defaultValue={editingProject?.description} />
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                取消
              </Button>
              <Button onClick={handleSave}>保存</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 新建项目对话框 */}
      <Dialog open={isNewProjectDialogOpen} onOpenChange={setIsNewProjectDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新建项目</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="newName">项目名称</Label>
              <Input
                id="newName"
                value={newProject.name}
                onChange={(e) => setNewProject({ ...newProject, name: e.target.value })}
                placeholder="请输入项目名称"
              />
            </div>
            <div>
              <Label htmlFor="newDescription">项目描述</Label>
              <Textarea
                id="newDescription"
                value={newProject.description}
                onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
                placeholder="请输入项目描述"
              />
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsNewProjectDialogOpen(false)}>
                取消
              </Button>
              <Button onClick={handleCreateProject}>创建</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
